<template>
  <el-dialog :visible.sync="isShow" v-if="isShow" title="游戏设置" width="50%" :before-close="handleClose" top="150px" :close-on-click-modal="false">
    <div class="border-box">
      <el-form ref="ruleForm" :model="formParams" :rules="ruleForm" label-position="right" label-width="0">
        <div class="flex item-box" v-for="(item,index) in itemData" :key="index">
          <div class="title width25">
            {{ item.label }}<span :class="item.pass?'mustPass':'noMustPass'">*</span>
          </div>
          <div class="content width80">
            <el-form-item class="item-clear" v-show="item.key=='a_webbanner_id'" label="" prop="a_webbanner_id">
              <el-input-number :min="0" :max="999999999" :precision="0" v-model="formParams.a_webbanner_id" controls-position="right" clearable placeholder="请输入bannerId"/>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='a_webbanner_title'" label="" prop="a_webbanner_title">
              <el-select class="width360" v-model="formParams.a_webbanner_title" placeholder="请选择标题" filterable>
                <el-option :label="second.c_base_zh_cn" :value="second.a_base_message_id" v-for="(second, two) in languageArray" :key="two"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='a_webbanner_remark'" label="" prop="a_webbanner_remark">
              <el-input class="width360" type="text" v-model="formParams.a_webbanner_remark" clearable placeholder="请输入备注" auto-complete="off"/>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='a_webbanner_type'" label="" prop="a_webbanner_type">
              <el-select class="width360" v-model="formParams.a_webbanner_type" placeholder="请选择类型" filterable>
                <el-option label="游戏" :value="1" >游戏</el-option>
                <el-option label="活动" :value="2" >活动</el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='a_webbanner_catalogue'" label="" prop="a_webbanner_catalogue" style="height:auto;">
              <imgUpLoad :url="formParams.a_webbanner_catalogue" @success='imgUploadChangCatalogue'/>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='a_webbanner_junior'" label="" prop="a_webbanner_junior" style="height:auto;">
              <imgUpLoad :url="formParams.a_webbanner_junior" @success='imgUploadChangJunior'/>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='a_webbanner_link'" label="" prop="a_webbanner_link" style="height:auto;">
              <imgUpLoad :url="formParams.a_webbanner_link" @success='imgUploadChangLink'/>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='a_webbanner_position'" label="" prop="a_webbanner_position" style="height:auto;">
              <imgUpLoad :url="formParams.a_webbanner_position" @success='imgUploadChangPosition'/>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='a_webbanner_pic'" label="" prop="a_webbanner_pic">
              <el-select class="width360" v-model="formParams.a_webbanner_pic" placeholder="请选择slogan多语言" filterable>
                <el-option :label="second.c_base_zh_cn" :value="second.a_base_message_id" v-for="(second, two) in languageArray" :key="two"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='a_webbanner_intro'" label="" prop="a_webbanner_intro">
              <el-select class="width360" v-model="formParams.a_webbanner_intro" placeholder="请选择按钮多语言" filterable>
                <el-option :label="second.c_base_zh_cn" :value="second.a_base_message_id" v-for="(second, two) in languageArray" :key="two"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="handleClose">取 消</el-button>
      <el-button size="medium" type="primary" @click="handleConfirm('ruleForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  addBanner,
  editBanner,
} from '@/api/game'
import {
  GAME_TYPE
} from '@/utils/enum'
import imgUpLoad from '@/components/imgUpLoadSingle'
export default {
  components: {
    imgUpLoad
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    },
    languageArray: {
      type: Array,
      default: function () {
        return []
      }
    },
  },
  data () {
    return {
      GAME_TYPE,
      isShow: false,
      itemData:[
        { label: 'bannerId', key: 'a_webbanner_id',pass:true},
        { label: '备注', key: 'a_webbanner_remark'},
        { label: '标题', key: 'a_webbanner_title',pass:true },
        { label: '游戏类型', key: 'a_webbanner_type' },
        { label: '背景图片(横版)', key: 'a_webbanner_catalogue' },
        { label: '背景图片(竖版)', key: 'a_webbanner_junior' },
        { label: '促销活动背景图片(横板)', key: 'a_webbanner_link' },
        { label: '促销活动背景图片(竖版)', key: 'a_webbanner_position' },
        { label: 'slogan多语言', key: 'a_webbanner_pic',pass:true },
        { label: '按钮多语言', key: 'a_webbanner_intro',pass:true },
      ],
      formParams: {
        a_webbanner_id: 0, //banner的id
        a_webbanner_remark: '', //备注
        a_webbanner_title: '', //标题
        a_webbanner_type: '', //类型 1是游戏2是活动
        a_webbanner_catalogue: '', //背景图片(横板)
        a_webbanner_junior: '', //背景图片(竖版)
        a_webbanner_link: '', //促销活动背景图片(横板)
        a_webbanner_position: '', //促销活动背景图片(竖版)
        a_webbanner_pic: '', //slogan多语言
        a_webbanner_intro: '' //按钮多语言
      },
      ruleForm: {
        a_webbanner_id: [{ required: true, trigger: 'blur', message: '请输入bannerId', }],
        a_webbanner_title: [{ required: true, trigger: 'blur', message: '请选择标题', }],
        a_webbanner_pic: [{ required: true, trigger: 'blur', message: '请选择slogan多语言', }],
        a_webbanner_intro: [{ required: true, trigger: 'blur', message: '请选择按钮多语言', }],
      },
    }
  },
  computed: {},
  watch: {
    show: function () {
      let that = this;
      that.isShow = that.show
      if (that.data) {
        that.formParams = JSON.parse(JSON.stringify(that.data))
      } else {
        that.formParams = {
          a_webbanner_id: 0, 
          a_webbanner_remark: '', 
          a_webbanner_title: '',
          a_webbanner_type: '',
          a_webbanner_catalogue: '',
          a_webbanner_junior: '',
          a_webbanner_link: '',
          a_webbanner_position: '',
          a_webbanner_pic: '', 
          a_webbanner_intro: ''
        }
      }
    },
  },
  mounted () {},
  methods: {
    // 确认
    handleConfirm (formvalue) {
      let that = this, params = JSON.parse(JSON.stringify(that.formParams));
      that.$refs[formvalue].validate((valid) => {
        if (valid) {
          // 新增
          if (!params.id) {
            addBanner(params).then(function (res) {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          } else {
            editBanner(params).then(function (res) {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          }
        } else {
          return false;
        }
      });
    },
    // 上传图片-请选择背景图片(横版)
    imgUploadChangCatalogue (url) {
      this.formParams.a_webbanner_catalogue = url
    },
    // 上传图片-请选择背景图片(竖版)
    imgUploadChangJunior (url) {
      this.formParams.a_webbanner_junior = url
    },
    // 上传图片-促销活动背景图片(横版)
    imgUploadChangLink (url) {
      this.formParams.a_webbanner_link = url
    },
    // 上传图片-促销活动背景图片(竖版)
    imgUploadChangPosition (url) {
      this.formParams.a_webbanner_position = url
    },
    // 取消
    handleClose () {
      this.$emit('onHideDetails', false)
    },
  }
}
</script>

<style scoped lang="scss">

</style>
